import React, { useState } from 'react';
import {
  Form,
  Row,
  Col,
  Button,
  DatePicker,
  Select,
  Table,
  Input,
  message,
} from 'antd';
import moment from 'moment';
import request from '@/http';
const { RangePicker } = DatePicker;
const { Option } = Select;

export default () => {
  const [expand, setExpand] = useState(true);
  const [form] = Form.useForm();
  const formItemLayout = {
    labelCol: {
      xs: { span: 7 },
      sm: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };
  const getFields = () => {
    const count = expand ? 10 : 6;
    const children = [];
    children.push(
      <Col span={8}>
        <Form.Item name="date" label="日期:">
          <RangePicker
            style={{
              width: '100%',
            }}
            ranges={{
              Today: [moment(), moment()],
              'This Month': [
                moment().startOf('month'),
                moment().endOf('month'),
              ],
            }}
          />
        </Form.Item>
      </Col>,
    );
    return children;
  };

  const columns = [
    {
      title: '日期',
      dataIndex: 'punchDate',
      key: 'punchDate',
    },
    {
      title: '学号',
      dataIndex: 'studentNo',
      key: 'studentNo',
    },
    {
      title: '姓名',
      dataIndex: 'studentName',
      key: 'studentName',
    },

    {
      title: '打卡时间',
      dataIndex: 'punchTime',
      key: 'punchTime',
    },
    {
      title: '教室',
      dataIndex: 'equipment',
      key: 'equipment',
    },
  ];

  const [dataSource, setDataSource] = useState([]);
  const [total, setTotal] = useState('');
  const pagination = {
    total: parseInt(total),
    showSizeChanger: true,
    showQuickJumper: true,
    pageSizeOptions: ['5', '10', '50', '100'],
  };
  const loadData = async (
    paramuser: any,
    pageValue: any,
    pageSizeValue: any,
  ) => {
    try {
      setExpand(true);
      const result: any = await request.get(
        '/api/student/attendance/punchRecord',
        {
          params: {
            ...paramuser,
            pageNumber: pageValue,
            pageSize: pageSizeValue,
          },
        },
      );
      if (result.success) {
        const data = result.data.records.map((user: any) => ({
          key: `attendance_${user.id}`,
          id: user.id,
          punchDate: user.punchDate,
          punchTime: user.punchTime,
          studentNo: user.studentNo,
          studentName: user.studentName,
          equipment: user.equipment,
        }));
        setExpand(false);
        setDataSource(data);
        setTotal(result.data.total);
      }
    } catch (e) {
      message.error('错误');
    }
  };

  React.useEffect(() => {
    loadData('', '', '').finally();
  }, []);

  const onFinish = async (values: any) => {
    const data = {
      startDate: values.date ? values.date[0].format('yyyy-MM-DD') : '',
      endDate: values.date ? values.date[1].format('yyyy-MM-DD') : '',
    };
    await loadData(data, '', '');
  };

  const pageOnChange = (page: any) => {
    const time = {
      startDate: form.getFieldsValue().date
        ? form.getFieldsValue().date[0].format('yyyy-MM-DD')
        : '',
      endDate: form.getFieldsValue().date
        ? form.getFieldsValue().date[1].format('yyyy-MM-DD')
        : '',
    };
    loadData(time, page.current, page.pageSize).finally();
  };
  return (
    <>
      <Form
        {...formItemLayout}
        form={form}
        name="advanced_search"
        className="ant-advanced-search-form"
        onFinish={onFinish}
      >
        <Row gutter={24}>{getFields()}</Row>
        <Row>
          <Col span={24} style={{ textAlign: 'left' }}>
            <Button type="primary" style={{ width: '7%' }} htmlType="submit">
              查询
            </Button>
            <Button
              style={{ margin: '0 8px', width: '7%' }}
              onClick={() => {
                form.resetFields();
              }}
            >
              重置
            </Button>
          </Col>
        </Row>
      </Form>
      <Table
        loading={expand}
        columns={columns}
        onChange={pageOnChange}
        dataSource={dataSource}
        pagination={pagination}
      />
    </>
  );
};
